@import "base/base";
@import "base/tree";
@import "base/dialog";

//header
$headerHeight : 50px;
body{
    background-color: $bodyBackgroundColor;
}
header{
    $iconHeight : 35px;
    $iconWidth  : 1.72 * $iconHeight;
    $headBGColor: #262C33;
    
    z-index: 999;
    background-color: $headBGColor;
    height: $headerHeight;
    position: fixed;
    top: 0;
    width: 100%;
    .am-topbar {
        background-color: $headBGColor;
        font-size: 1em;
        border: none;
        .am-text-ir {
            display: block;
            margin-top: ($headerHeight - $iconHeight)/2;
            margin-right: 10px;
            height: $iconHeight;
            width: $iconWidth;
            background: url(../img/login/logo_1.png) no-repeat left center;
            -webkit-background-size: $iconWidth $iconHeight;
            background-size: $iconWidth $iconHeight;
        }
        
        $titileBorderColor : #FFA017;
        $titleHeight : 30px;
        div.topbar-title{
            height: $titleHeight;
            margin-top: ($headerHeight - $titleHeight)/2;
            margin-right: 30px;
            border-left: 1.8px $titileBorderColor solid;
            float: left;
            
            span{
                display: block;
                margin: 2px 0 0 10px;
            }
        }
        
        $buttonLeftColor : #283440;
        div#headerMenu{
            .am-topbar-nav{
                li:first-child{
                    border-left: 2px $buttonLeftColor solid;
                }
                li{
                    text-align: center;
                    width: 70px;
                }
                li.active > a{
                    color: #F69C06 ;
                }
            }
        }
        
        $userInfoBGColor : #202F44;
        $userInfoWidth : 150px;
        $userImgWH : 35px; 
        div.userInfoArea{
            height: $headerHeight;
            width: $userInfoWidth;
            background-color: $userInfoBGColor;
            font-size: 0.95em;
            .userName{
                padding-left: 10px;
                color: $titileBorderColor;
                line-height: $headerHeight;
                
            }
            .userImg{
                margin : ($headerHeight - $userImgWH)/2;
                width: $userImgWH;
                height: $userImgWH;
                float: right;
                @include box-shadow(
                    #FBFFFE 0 0 0 1px,
                    #221529 0 0 0 2px
                );
            }
            
            ul.am-dropdown-content{
                background-color: $userInfoBGColor;
                margin-top: 0px;
                min-width: $userInfoWidth ;
                overflow: hidden;
                &,&:before,&:after{
                    border: none;
                }
                >li>a{
                    color: white;
                    &:hover{
                        background-color: $userInfoBGColor;
                        color: $titileBorderColor;
                    }
                }
            }
        }
        
        
        .inboxArea{
            $inboxWidth : 30px;
            $inboxHeight : 20px;
            margin: 0;
            position: relative;
            img{
                border-left: 2px $buttonLeftColor solid;
                padding: ($headerHeight - $inboxHeight)/2 15px;
            }
            span{
                position: absolute;
                right : 5px;
                top: 5px;
            }
        }
    }
}

//second head
div#secondHead{
//  display: none;
    margin-top: $headerHeight;
    height: $headerHeight;
    background-color: #FFFFFF;
    border-bottom: 1px #E0E0E0 solid;
    >ul.nav{
        @include horizontal-list;
        padding-left: 35%;
        line-height: 40px;
        margin-top: 8px;
        li{
            text-align: center;
            width: 80px;
            margin-left: 20px;
            
            a{
                @include link-colors(#000,#FFA017,#FFA017,#000,#000);
            }
            &.active{
                border-bottom: 2px #FFA017 solid;
                a{
                    color: #FFA017;
                }
            }
        }
        
    }
}
$footerHeight : 50px;
//Body Part
div.myBody{
    width: 100%;
    margin-bottom: $footerHeight;
}


//footer
footer.footerCopyRight{
    position: fixed;
    bottom: 0;
    width: 100%;
        height: $footerHeight;
        background-color: #232323;
        font-size: 12px;
        color: #777 ;
        text-align: center;
        line-height: $footerHeight;
}

//loading Bar
div#loadingBar{
    position: fixed;
    z-index: 99999;
    width: 80px;
    height: 50px;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
    color: red;
    span{
        display: block;
    }
    span.glyphicon{
        font-size: 50px;
        @include animation(rotate360 2s infinite linear);
    }
    span.text{
        font-size: 1.1em;
        margin-top: 10px;
    }
}

@include keyframes(rotate360){
    100% { @include transform(rotate(360deg));}
}